<template>
    <div class="wordbook-item" @click="handleClick" ref="wordbookItemRef" :on-LongPress="handleLongPress">

        <div class="action-buttons" v-if="showButtons" style="width: 80%;">
            <van-button @click="handleDelete" type="danger" size="mini">删除</van-button>
            <van-button @click="handleModify" type="primary" size="mini">修改</van-button>
        </div>

        <div class="category" v-if="!showButtons"><span style="font-weight: bolder;">{{ category }}</span></div>
        <div class="name" v-if="!showButtons">{{ name }}</div>
        <div class="word-count" v-if="!showButtons">共<span style="color: red;">{{ wordCount }}</span>词</div>
        <div class="create-time"v-if="!showButtons" style="color: gray;">{{ createTime.substring(0,10) }}</div>
    </div>
</template>

<script setup lang="ts">
import { defineEmits, ref} from 'vue';
import { onLongPress } from '@vueuse/core';

const wordbookItemRef = ref(null);
const showButtons = ref(false);

// 定义要发送的事件名称
const emits = defineEmits(['readWordbook','modifyWordbook']);

const props = defineProps({
    id: BigInt,
    category: String,
    name: String,
    wordCount: Number,
    createTime: String,
    backgroundImage: String // 接收背景图片路径的属性
});


const handleLongPress = onLongPress(wordbookItemRef, () => {
    showButtons.value = true;
}, { delay: 600 }); // 设置长按延迟时间为500毫秒，可根据需求调整


const handleClick = () => {
    if (!showButtons.value) {
        emits('readWordbook');
    }
    showButtons.value = false;
};

const handleDelete = () => {
    console.log('执行删除操作');
    // 这里可以添加具体的删除业务逻辑，比如向父组件发送删除事件等
};

const handleModify = () => {
    console.log('执行修改操作');
    emits('modifyWordbook');
};

</script>

<style scoped>
.wordbook-item {
    height: 130px;
    width: 90px;
    border: 1px dashed #87ceeb;
    /* 浅蓝色边框 */
    background-color: lightgreen;
    /* 淡红色背景，且设置透明度为0.5 */
    position: relative;
    /* 为了让内部子元素能基于它进行定位 */
    background-size: cover;
    /* 让背景图片铺满整个div */
    background-position: center;
    /* 背景图片居中显示 */
    background-repeat: no-repeat;
    /* 不重复显示背景图片 */
    /* background-image: url(../assets/wordbook_background1.jpg); */
    /* 默认背景图片路径，后续通过props传入实际路径替换 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    /* 均匀分配垂直方向空间，方便布局子元素 */
    border-radius: 6px;
}

.wordbook-item.category {
    position: absolute;
    font-size: 12px;
    font-weight: bolder;
    color: #333;
}

.wordbook-item.name {
    width: 100%;
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-top: auto;
    overflow-x: scroll;
    /* 让其在垂直方向靠中间，结合flex布局实现上下均匀间隔 */
    margin-bottom: auto;
}


.wordbook-item.word-count {
    position: absolute;
    font-size: 12px;
    color: red;
}

.wordbook-item.create-time {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 12px;
    color: #333;
}

.wordbook-item .action-buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    gap: 5px;
}

/* 根据传入的props中的背景图片路径来动态设置背景图片 */
.wordbook-item[background-image]:not([background-image=""]):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    /* 背景图片的透明度设置为0.5 */
    z-index: -1;
    /* 让背景图片在内容下方 */
}
</style>